Phalcon + AngularJS + Zurb Foundationのバスケット付き1ページストア

はじめに

みなさんこんにちは！ 明日、地元のカムチャツカの食品配送会社で行っているプロジェクトの締め切りがあります。 したがって、この記事を書く理由は2つあります。1つ目は期限前の先延ばし、2つ目は、AngularJSで商品バスケットを作成するためのトレーニングマニュアルが見つかりませんでした。



サードパーティのブログで、私の前にあったいくつかの問題の解決に部分的に役立つ記事を見つけました 。 しかし、記事のデザインは望まれずに残っており、5年間、構文の強調表示なしでメモ帳のコードとの接触をすでに失っていたため、この有用な情報を何らかの形で読みやすくする必要がありました。

単一ページのストア形式が選択されたのはなぜですか？

カムチャッカ半島のインターネットにはまだ問題があることをご存知の方もいるかもしれません。私たちの半島はまだ繊維で本土に接続されておらず、ストリーム全体が1つの塔を通過しているからです。 2015年末までに、オホーツク海の海底に沿って光ファイバーを敷設する作業を完了する予定であり、おそらく最終的に安定した高速のインターネットができるでしょう。



そして、それに応じて、不安定なチャネルによる料理の異なるカテゴリに移動する顧客の損失を排除するために、同様のモデルが選択されました。 つまり、サイトを一度ダウンロードして必要な情報をすべて入手し、注文すれば十分です。



また、この形式により、バスケット商品をセッション、localStorage、またはデータベースに保存する必要がなくなりました。 人がこのページをどこにも残さないことは確かなので、バスケットデータをjavascriptオブジェクトに格納します。 別のプラスは、カテゴリをナビゲートして新しいページをロードする必要がないため、注文時間が短縮されたことです。 また、料理の位置が多すぎないため、カテゴリをクリックするときにAjaxデータの読み込みを行う必要もありませんでした。すべてがデータベースキャッシュから読み込まれました。

データベース

1ページのサイトの設計が完了して完了したら、カテゴリと製品のデータベース構造を作成します。 これはおそらく、最速かつ最も簡単な段階であり、私たちのニーズを考え、システムのシンプルさとユーザーインタラクションに焦点を当てています。 Phalcon PHP Frameworkの管理パネルのスケッチはすでに持っているので、2つのカテゴリおよび製品テーブルで動作するように修正することは難しくありませんでした。



カテゴリー表





製品表





これはサイト管理者のようです

データベースからカテゴリと料理を取得する

データベースを操作するために、Phalconフレームワークの標準ORMシステムが使用されました。操作しない場合は、このセクションをスキップできます。これは一般的な開発用です。



フロントエンドモジュールのメインIndexController.phpコントローラーで、必要な方法でデータを生成し、それを唯一のページに表示する関数を作成しました。

public function indexAction() { //     $category = Category::find()->toArray(); $help = new \Lib\Url();         foreach ($category as $key => $val) { $category[$key]['url'] = $help->translit_url($val['name']); //   ?     if ($val['pid'] != 0) { unset($category[$key]); } else { //  ,          $category[$key]['sub'] = Category::find("pid = '".$val['id']."'")->toArray(); //  ,    ,  ,       if(count($category[$key]['sub']) > 0) { foreach($category[$key]['sub'] as $i => $cat) { $category[$key]['sub'][$i]['products'] = Products::find("category = '" . $cat['id'] . "'")->toArray(); } } else { $category[$key]['products'] = Products::find("category = '" . $val['id'] . "'")->toArray(); } } } $this->view->setVar('items',$category); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

おそらくこの問題に対するより洗練された解決策がありますが、1日あたり200人を超える訪問者はいません。クエリキャッシュをデータベースに接続します。特に、Phalcon-「The Fastest PHP Framework」であるため、原則としてそれほど負荷はかかりません。 しかし、問題はパフォーマンスと最適化に関するものではなく、早すぎることです。主なことは、ページに商品を表示するときです。

ページ上で製品をレンダリングするには誰を信頼すべきですか？ AngularJSまたはPhalcon？

最初はすべてをAngularJSに実装しましたが、それは何とかよりエレガントできれいでしたが、検索エンジンによるSEOの最適化とインデックス付けについて考えました。



このコードのサイズの理由と、倫理的な理由の両方の理由から、商品をページに表示するコードはお客様の製品と同じです。 はい、Habrを読む人は、PHPでforeach関数を使用する方法を知っています。



さて、私が料理のカテゴリーをどのように推測したかを示します。例では、誰もが商品を理解します。

 <div class="row"> <div class="large-12 columns"> <ul class="tabs small-block-grid-2 medium-block-grid-4 large-block-grid-6" data-tab> <?php foreach ($items as $item): ?> <li> <a href="#<?= $item['url'] ?>"> <img ng-src="/uploads/<?= $item['images'] ?>" alt="<?= $item['name'] ?>"> </a> <p><?= $item['name'] ?></p> </li> <?php endforeach; ?> </ul> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この全体が非常に食欲をそそります。

カートにアイテムを追加する

カテゴリをクリックすると、このカテゴリの料理のタブが下に開きます。 おそらくこれらの魅力的な写真を見ることができない人もいるかもしれませんが、1ページのストアの作業の説明を続けるには、サイトで製品カードがどのように見えるかを示す必要があります。 ご覧ください。











だから、 キーボードからよだれを拭いて、バスケットに追加して最終的な注文額を計算する基本的な機能がどのように機能するかを見てみましょう。



基本的に、基本を理解するには、このコードを見るだけで済みます。このコードには、皿の数を入力できるフィールドを持つ[追加]ボタンが表示されます。

 <div class="add-cart"> <input type="number" ng-model="num<?=$p['id']?> value="1" min="1" max="50"> <button type="button" ng-click="addCart(<?=$p['id']?>, num<?=$p['id']?>, '<?=$p['title']?>', <?=$p['price']?>)"></button> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソースコードからわかるように、addCart（）関数はデータをjavascriptオブジェクトに追加します。AngularJSのソースコードを見てみましょう。

  $scope.carts = []; $scope.addCart = function(id, num, title, price) { var nums = num || 1; $scope.carts.push({ id : id, num : nums, title : title, price : price }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

説明するものは何もないと思う、すべてが非常にシンプルで明確であり、最も重要なこと-それは動作します！ $ scope.cartsにデータを追加したら、どこかに表示する必要があります。 私たちの場合、デザイナーはそのように右側のフローティングウィンドウでそれを行うことにしました。





そしてそれに応じてコード。

 <div class="cart ng-cloak" ng-cloak ng-show="carts.length > 0"> <div class="cart-items"> <h3 class="text-center"></h3> <div class="row items" ng-repeat="item in carts"> <div class="small-5 columns text-right"> {{item.title}} </div> <div class="small-2 columns"> <input type="number" ng-model="item.num" min="1" max="50"> </div> <div class="small-4 columns"> {{item.price}} . </div> <div class="small-1 columns"> <a href ng-click="removeItem(carts,item)">X</a> </div> </div> </div> <div class="cart-results text-center"> <div class="row"> <div class="small-12 columns"> <select ng-model="delivery" ng-init="delivery = 0"> <option value="0"> </option> <option value="1"> </option> <option value="2">, </option> <option value="3"> (-10%)</option> </select> </div> </div> <h3>{{total() | number : 0}} .</h3> <button class="new_btn" data-reveal-id="order"></button> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ちなみに、ng-cloak機能は、カムチャッカインターネットの条件で役立ちます。使用しない場合は、ページが読み込まれるのを待つ間、怖いキャラクターが入った空のバスケットが表示されます。 AngularJSに慣れていない人のために、いくつかの重要なポイントを指摘します。

これは、商品が入っている場合にのみバスケットを表示するために必要です。

 ng-show="carts.length > 0"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、最終注文額を表示し、数値をフォーマットし、たとえば集荷の場合に10％の割引を計算するときに生じる可能性のあるペニーを削除します。

 {{total() | number : 0}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

連想配列の要素を削除するタスクを頻繁に行いました。その方法を忘れるたびに、グーグルに頼りましたが、この出版物の後に私が最終的に覚えていて、知らない人が見つけることを願っています

 $scope.removeItem = function(carts, item) { carts.splice(item, 1); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、何が、誰かがより多くのコードがあると予想しましたか？ ところで、1行で書くこともできます。 しかし、邪魔にならないようにしましょう。主なことはコードの可読性です。 そして、おそらくこの記事で最後に紹介したい機能は、最終注文額の計算です。 それは、配達の条件と方法に基づいて作られました。

 $scope.total = function() { var total = 0; angular.forEach($scope.carts, function(item) { total += item.num * item.price; }); var delivery = 0; if($scope.delivery == 0) { if(total >= 600) { delivery = 0; } else { delivery = 130; } } if($scope.delivery == 1) { if(total >= 1500) { delivery = 0; } else { delivery = 130; } } if($scope.delivery == 2) { delivery = 300; } if($scope.delivery == 3) { delivery = 10/total*100*(-1); } return total + delivery; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

数字がどこで成長するかを説明する方法は、配信情報とともにブロックを表示するだけで、コード内の異なる数字がどこに表示されるかを自分で理解できます。 さらに、これらのデータはそれぞれ異なり、地区の数も異なりますので、特にこの記事はすでに膨大であることが判明しているため、これに注意を向ける理由はありません。

あとがき

私の投稿の主なタスクは解決されました。現在、AngularJSで商品をバスケットに追加して注文金額を計算する方法に関する資料がHabréにあり、インターネットにはこれに関するよく書かれた資料があり、サードパーティのブログからのエントリを補完します記事の始まり。 まあ、同様に、私はすでに十分先延ばしになっているので、再び作業を開始し、顧客への注文の送信を終了します。 この記事が私のような人々に役立つことを願っています。 提供されたソースコードについてまだ質問がある場合、または不明な点がある場合は、コメントで回答させていただきます。 残念ながら、AngularJSでの経験は半年しかないので、できる限り多くのことを手伝います。 ご清聴ありがとうございました。



更新する

コメントを寄せてくれたすべての人に感謝し、欠点を修正して次の出版物で行われた作業について説明しました。 「Phalcon PHP + AngularJSの1ページストア。 バグに取り組みます。 」