商品カタログ用のバスケット（minibasket.js）

最近、もう一度、タスクは製品カタログの使いやすさを改善することでした。 顧客はオンラインストアのすべての機能を必要としませんでしたが、ユーザーが商品をバスケットに入れる機能が非常に必要でした。 それでも、顧客は自動車部品を販売しているため、ユーザーが電話番号でさえリスト全体をリストアップすることは非常に不便です。



注文の中間段階であるバスケットを導入することが決定されました。 もちろん、cmsにアタッチされないようにスクリプトで行います（他に便利な場所を探してください）。



その結果、このようなバスケットを任意のサイトに固定できるライブラリができました。



リポジトリへの直接リンク 。



一般に、バスケットは接続するとすぐに機能します。必要なのはセレクターを明確にすることだけです。

レイアウトはすべての人で異なるため、どのボタンがバスケットへの追加を開始するか、価格がどこにあるか、名前と数量がどこにあるかを示す必要があります。

$(function(){ var minibasket = { selector: { item: '.mb-item', articul: '.art', price: '.mb-price .value', name: '.mb-name', count: '.mb-num', toBasketButton: '#tobasket span' }, ......
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

1つのページに複数の製品がある場合があるため（アイテムの価格リストを扱っているなど）、すべてのセレクター（アイテムを除く）はこの同じセレクターアイテムを持つブロックにネストする必要があります。



メッセージを上書きすることもできます：

 ....... msg: { success: "  .<br>      !", invalidTel: '  ', re: ' ?', wrongOrder: '          .', empty: '  :(' }, ......
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

よりカスタマイズするには、バスケットへの追加を開始する独自のスクリプトを追加できます（add（）メソッド）：

  add: function(articul,price,name,num){ .....
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そのような製品がすでにバスケットに入っている場合、数量と価格が上がります。 同じ名前の複製は作成されません。



したがって、remove（）メソッドはバスケットからアイテムを削除します。 バスケット内のアイテムのDOMアイテムはパラメーターとして取得されます。

  remove: function(obj){ obj.fadeOut('slow', function(){ obj.remove(); minibasket.calc(); if (!minibasket.items.html()) minibasket.items.html(minibasket.msg.empty); localStorage['accept'] = ''; minibasket.save(); }); },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

clear（）メソッドを使用してバスケットを空にします。

  clear: function(){ this.items.html(this.msg.empty); this.calc(); this.save(); },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

念のため、サードパーティのスクリプトでバスケットの内容に加えた変更を保存する必要がある場合に使用できるsave（）メソッドがあります。

  var save = { tel: minibasket.tel.val(), items: minibasket.items.html() } localStorage['minibasket'] = JSON.stringify(save);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

init（）メソッド自体はデフォルトで呼び出されます。