使用Ajax的Magento配置产品到自定义Laravel可配置产品

Question

目前，我正在尝试将Magento配置产品转换为Custom Laravel配置产品。

在第一步中，我正在显示后端的所有属性

步骤1：选择属性

< img src =“ https://i.sstatic.net/5ahdu.png” alt =“在此处输入映像说明”>

（在这里我显示了后端的所有属性）

我的视图刀片代码：

 <div class="container">
        <div class="row p-b-35">
          <div class="form-group">
            @foreach($attributes as $attribute)
            <div class="form-check complete">
             <input type="checkbox" id="{{$attribute->id}}" name="attribute[]" value="{{$attribute->id}}">
             <label for="{{$attribute->id}}">
              {{$attribute->name}}
            </label>
          </div>
          @endforeach
        </div> 
      </div>
      <button  class="btn btn-cons btn-primary" id="stepOne">Next</button>
    </div> 

一旦用户检查我使用ajax存储属性ID

ajax代码的属性：

$('#stepOne').click(function(e){
        e.preventDefault();

      var attribute = "";
          $(":checkbox").each(function () {
              var ischecked = $(this).is(":checked");
              if (ischecked) {
                  attribute += $(this).val() + ",";
          }
      });
        $.ajax({
          url: "/configStepOne",
          type:"POST",
          data:{
            "_token": "{{ csrf_token() }}",
            attribute:attribute,
          },
          success:function(response){
            $('#successMsg').show();
              $('#stepOneResponse').append(response.html);
          },
          error: function(response) {
             console.log(response.responseJSON.message);
          },
          });
        });

在我的控制器方法（configstepone）中：

  public function configStepOne(Request $request) {
      if (!is_null(Session::get('attributes'))) {
            Session::forget('attributes');
      }
      Session::put('attributes', $request->attribute);

      $config_attribute_array = [];
      if (!is_null(Session::get('attributes'))) {
        $config_attribute = Session::get('attributes');
        $config_attribute = substr($config_attribute, 0, -1);
        $config_attribute_array = explode(',', $config_attribute);
      } 
      $html = "";
      foreach($config_attribute_array as $value) {
        $config_attr = Attributee::findOrFail($value);
        $html .= '<p class="small hint-text m-b-20">'.$config_attr->name.'</p>';
        foreach($config_attr->options as $option) {
          $html .= '<div class="form-check complete">';
          $html .= '<input type="checkbox" id="'.$config_attr->name. '-' .$option->id.'-'.$option->option.'" name="option[]" value="'.$option->id.'">';
          $html .= '<label for="'.$config_attr->name.'-'.$option->id.'-'.$option->option.'">'.$option->option.'</label>';
          $html .= '</div>';
        }
        $html .= '<br>';
      }

      return response()->json(['success'=>'Successfully', 'html' => $html]);
    }

在这里我尝试从后端获取各个属性，并将响应附加到blade view

step 2：属性值：属性值：

在我的刀片视图中，我有：

<div id="stepOneResponse">
      
    </div>
   <button  class="btn btn-cons btn-primary" id="stepTwo">Next</button>

从AJAX附加刀片视图的更新为：

<div id="stepOneResponse">
   <p class="small hint-text m-b-20">Color</p>
   <div class="form-check complete"><input type="checkbox" id="Color-1-Red" name="option[]" value="1"><label for="Color-1-Red">Red</label></div>
   <div class="form-check complete"><input type="checkbox" id="Color-2-Black" name="option[]" value="2"><label for="Color-2-Black">Black</label></div>
   <div class="form-check complete"><input type="checkbox" id="Color-7-Blue" name="option[]" value="7"><label for="Color-7-Blue">Blue</label></div>
   <div class="form-check complete"><input type="checkbox" id="Color-8-Green" name="option[]" value="8"><label for="Color-8-Green">Green</label></div>
   <br>
   <p class="small hint-text m-b-20">Size</p>
   <div class="form-check complete"><input type="checkbox" id="Size-3-XL" name="option[]" value="3"><label for="Size-3-XL">XL</label></div>
   <div class="form-check complete"><input type="checkbox" id="Size-4-SM" name="option[]" value="4"><label for="Size-4-SM">SM</label></div>
   <div class="form-check complete"><input type="checkbox" id="Size-9-medium" name="option[]" value="9"><label for="Size-9-medium">medium</label></div>
   <div class="form-check complete"><input type="checkbox" id="Size-10-Extra small" name="option[]" value="10"><label for="Size-10-Extra small">Extra small</label></div>
   <br>
   <p class="small hint-text m-b-20">Format</p>
   <div class="form-check complete"><input type="checkbox" id="Format-13-Download" name="option[]" value="13"><label for="Format-13-Download">Download</label></div>
   <div class="form-check complete"><input type="checkbox" id="Format-14-DVD" name="option[]" value="14"><label for="Format-14-DVD">DVD</label></div>
   <br>
</div>
<button  class="btn btn-cons btn-primary" id="stepTwo">Next</button>

AJAX代码：

 $('#stepTwo').click(function(e){
            e.preventDefault();

          var option = "";
          var option_id = "";
              $("#stepOneResponse :checkbox").each(function () {
                  var ischecked = $(this).is(":checked");
                  if (ischecked) {
                      option += $(this).val() + ",";
                      option_id += $(this).attr('id') + ",";
                  }
              });
            $.ajax({
              url: "/configStepTwo",
              type:"POST",
              data:{
                "_token": "{{ csrf_token() }}",
                option:option,
                option_id:option_id,
              },
              success:function(response){
                $('#successMsg').show();
                 console.log(response);
                  $('#stepTwoImageResponse').append(response.imageHtml);
                  $('#stepTwoPriceResponse').append(response.priceHtml);
                  $('#stepTwoQtyResponse').append(response.qtyHtml);
                  $('#count').text(response.count);

              },
              error: function(response) { 
                 console.log(response.responseJSON.message);
              },
              });
            });

在Controller方法configSteptWo：

public function configStepTwo(Request $request) {
      if (!is_null(Session::get('options'))) {
              // Session::forget('option');
      }
      Session::put('options', $request->option);
      Session::put('options_id', $request->option_id);

      $config_attribute = "";
      $config_attribute_opt_string = "";
      $config_attribute_array = [];
      $config_attribute_opt_array = [];
      $config_attribute_opt_array_id = [];
      if (!is_null(Session::get('attributes'))) {
        $config_attribute = Session::get('attributes');
        $config_attribute = substr($config_attribute, 0, -1);
        $config_attribute_array = explode(',', $config_attribute);
        // dd($config_attribute_array);    
      } 

      if (!is_null(Session::get('options'))) {
        $config_attribute_opt = Session::get('options');
        $config_attribute_opt = substr($config_attribute_opt, 0, -1);
        $config_attribute_opt_array = explode(',', $config_attribute_opt);
        // dd($config_attribute_opt_array);    
      } 


      if (!is_null(Session::get('options_id'))) {
        $config_attribute_opt_id = Session::get('options_id');
        // $config_attribute_opt_id = strstr($config_attribute_opt_id, '-', true);
        $config_attribute_opt_id = substr($config_attribute_opt_id, 0, -1);
        $config_attribute_opt_array_id = explode(',', $config_attribute_opt_id);
      } 
      foreach ($config_attribute_opt_array_id as $key => $value) {
        $config_attribute_opt_string .= strstr($value, '-', true). ',';
      // $config_attribute_opt_string .= $value. ',';
      }

      $config_attribute_opt_string = substr($config_attribute_opt_string, 0, -1);
      $config_attribute_opt_array_id = explode(',', $config_attribute_opt_string);
      $array_count = array_count_values($config_attribute_opt_array_id);
      $count = 1;
      foreach ($array_count as $key => $value) {
        $count *= $value;
      }

      Session::put('count', $count);

      $imageHtml = "";
      $imageHtml .= '<div class="form-group col-lg-4" id="multi_config_image" style="display: none">
      <label for="type">Select attribute </label>
      <select name="image_attribute_id" class="form-control" id="image_attribute_id">
      <option value="">Select</option>';
      foreach($config_attribute_array as $value) {
        $config_attr = Attributee::findOrFail($value);
        $imageHtml .= '<option value="'.$config_attr->name.'">'.$config_attr->name.'</option>'; 
      }
      $imageHtml .= '</select>';

      foreach($config_attribute_opt_array as $value) {
        $config_opt = AttributeOption::findOrFail($value);

        $imageHtml .= '<div id="image_option_id">';
        $imageHtml .= '<div class="row '.$config_opt->attribute->name.'" style="display: none;">'. $config_opt->option.'<input type="file" name="option_image"  class="form-control" >';
        $imageHtml .= '</div>';
        $imageHtml .= '</div>';
      }
      $imageHtml .= '</div>';

      $priceHtml = "";
      $priceHtml .= '<div class="form-group col-lg-4" id="multi_config_price" style="display: none">
      <label for="type">Select attribute </label>
      <select name="price_attribute_id" class="form-control" id="price_attribute_id">
      <option value="">Select</option>';
      foreach($config_attribute_array as $value) {
        $config_attr = Attributee::findOrFail($value);
        $priceHtml .= '<option value="'.$config_attr->name.'">'.$config_attr->name.'</option>'; 
      }
      $priceHtml .= '</select>';

      foreach($config_attribute_opt_array as $value) {
        $config_opt = AttributeOption::findOrFail($value);
        $priceHtml .= '<div id="price_option_id">';
        $priceHtml .= '<div class="row '.$config_opt->attribute->name.'" style="display: none;">'. $config_opt->option.'<input type="text" name="option_price[]"  class="form-control" >';
        $priceHtml .= '</div>';
        $priceHtml .= '</div>';
      }
      $priceHtml .= '</div>';

      $qtyHtml = "";
      $qtyHtml .= '<div class="form-group col-lg-4" id="multi_config_qty" style="display: none">
      <label for="type">Select attribute </label>
      <select name="qty_attribute_id" class="form-control" id="qty_attribute_id">
      <option value="">Select</option>';
      foreach($config_attribute_array as $value) {
        $config_attr = Attributee::findOrFail($value);
        $qtyHtml .= '<option value="'.$config_attr->name.'">'.$config_attr->name.'</option>'; 
      }
      $qtyHtml .= '</select>';

      foreach($config_attribute_opt_array as $value) {
        $config_opt = AttributeOption::findOrFail($value);
        $qtyHtml .= '<div id="qty_option_id">';
        $qtyHtml .= '<div class="row '.$config_opt->attribute->name.'" style="display: none;">'. $config_opt->option.'<input type="text" name="option_qty[]"  class="form-control" >';
        $qtyHtml .= '</div>';
        $qtyHtml .= '</div>';
      }
      $qtyHtml .= '</div>';
      return response()->json(['success'=>'Successfully',
       'imageHtml' => $imageHtml,
       'priceHtml' => $priceHtml,
       'qtyHtml' => $qtyHtml,
       'count' => $count,
     ]);
    }

此处当用户选择属性时选项，在下一步中存储和使用选项，用户可以在属性方面存储选项值

步骤3：批量图像，价格和数量

net/7wcr8.png“ rel =“ nofollow noreferrer 属于每个sku的价格” 在此处查看文件

<p class="small hint-text m-b-10 m-t-20">
 Price
</p>
<div class="form-check">
  <input type="radio" name="price" id="price1">
  <label for="price1">
    Apply single of price to all SKUs
  </label>
</div>
<div class="form-check">
  <input type="radio" name="price" id="price2">
  <label for="price2">
    Apply unique prices by attribute to each SKU
  </label>
</div>
<div class="form-check">
 <input type="radio" name="price" id="price3" checked="checked">
 <label for="price3">
  Skip price at this time
</label>
</div>
<div class="form-group col-lg-4">
 <input type="text" class="form-control" name="single_config_price" id="single_config_price" style="display: none" placeholder="Please enter Price">
</div>
<div id="stepTwoPriceResponse">
  
</div>
<button  class="btn btn-cons btn-primary" id="stepThree">Next</button>

，我仅显示了用于价格响应的文件。请考虑一下图像和数量部分 这里，我尝试将所有属性选择选项附加

在 Ajax的代码

$('#stepThree').click(function(e){
            e.preventDefault();

          var option = "";
              $("input[name='option_price[]']").each(function () {
                if($(this).val()) {
                      option += $(this).val() + ",";
                }
              });
              console.log(option);
            $.ajax({
              url: "/configStepThree",
              type:"POST",
              data:{
                "_token": "{{ csrf_token() }}",
                option:option,
              },
              success:function(response){
                $('#successMsg').show();
                 console.log(response);
                 $("#tabImageNav").removeClass("active");
                 $("#tabImage").removeClass("active");
                  $('#tabDetailNav').addClass('active');
                  $('#tabDetail').addClass('active');
                  $('#table').append(response.table);
              },
              error: function(response) {
                // $('#nameErrorMsg').text(response.responseJSON.errors.message);
                 console.log(response.responseJSON.message);
              },
              });
            });
    });

In configStepThree method from controller
   public function configStepThree(Request $request) {
      if (!is_null(Session::get('mulit_options'))) {
              // Session::forget('mulit_options');
      }
      Session::put('mulit_options', $request->option);

      $config_attribute = "";
      $config_attribute_opt_string = "";
      $config_attribute_array = [];
      $config_attribute_opt_array = [];
      $config_attribute_opt_array_id = [];
      if (!is_null(Session::get('attributes'))) {
        $config_attribute = Session::get('attributes');
        $config_attribute = substr($config_attribute, 0, -1);
        $config_attribute_array = explode(',', $config_attribute);
      } 

      if (!is_null(Session::get('options'))) {
        $config_attribute_opt = Session::get('options');
        $config_attribute_opt = substr($config_attribute_opt, 0, -1);
        $config_attribute_opt_array = explode(',', $config_attribute_opt);
      } 


      if (!is_null(Session::get('options_id'))) {
        $config_attribute_opt_id = Session::get('options_id');
        $config_attribute_opt_id = substr($config_attribute_opt_id, 0, -1);
        $config_attribute_opt_array_id = explode(',', $config_attribute_opt_id);
      } 
      foreach ($config_attribute_opt_array_id as $key => $value) {
        $config_attribute_opt_string .= strstr($value, '-', true). ',';
      }


      $count = Session::get('count');

      $table = "";
      $table .= '<table class="table table-hover " >';
      $table .= '<thead>';
      $table .= '<tr>';
      $table .= '<th style="width:30%">Image</th>';
      $table .= '<th style="width:30%">SKU</th>';
      $table .= '<th style="width:40%">Quantity</th>';
      foreach ($config_attribute_array as $key => $attribute) {
       $config_attr = Attributee::findOrFail($attribute);
       $table .= '<th style="width:40%">'.$config_attr->name.'</th>';
     }
     $table .= '<th style="width:40%">Price</th>';
     $table .= '</tr>';
     $table .= '</thead>';
     $table .= '<tbody>';

     //This is what I want as collection
    $collection = [
       [
         'Color' => 'Red',
         'Size' =>  'XL',
         'Format' => 'Download',
         'price' => '200',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ],
       [
         'Color' => 'Red',
         'Size' =>  'SM',
         'Format' => 'Download',
         'price' => '200',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ],
       [
         'Color' => 'Black',
         'Size' =>  'XL',
         'Format' => 'Download',
         'price' => '300',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ],
       [
         'Color' => 'Black',
         'Size' =>  'SM',
         'Format' => 'Download',
         'price' => '300',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ]
     ];
     // dd($collection);
     // for ($i=1; $i <= $count; $i++) { 
         foreach ($collection as $key => $value) {
      $table .= '<tr>';
      $table .= '<td class="v-align-middle semi-bold"><img src="../assets/img/thumbnail.jpg" class="img-thumbnail"><span class="badge bage-alert bagde-top">'.$value['image_count'].'</span></td>';
      $table .= '<td class="v-align-middle">Simple but not simpler</td>';
      $table .= '<td class="v-align-middle semi-bold">'.$value['qty'].'</td>';
       foreach ($config_attribute_array as $key => $attribute) {
        $config_attr = Attributee::findOrFail($attribute);
        $table .= '<td class="v-align-middle semi-bold">'.$value[''.$config_attr->name.''].'</td>';
      }
      $table .= '<td class="v-align-middle semi-bold">'.$value['price'].'</td>';
      $table .='</tr>';
       }
    // }
    $table .= '</tbody>';
    $table .= '</table>';
    return response()->json(['success'=>'Successfully',
     'table' => $table,
   ]);
  }

步骤：4摘要表 查看刀片文件代码

在这里，我想从上面的步骤中显示所有相对的值。

注意

  $collection = [
       [
         'Color' => 'Red',
         'Size' =>  'XL',
         'Format' => 'Download',
         'price' => '200',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ],
       [
         'Color' => 'Red',
         'Size' =>  'SM',
         'Format' => 'Download',
         'price' => '200',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ],
       [
         'Color' => 'Black',
         'Size' =>  'XL',
         'Format' => 'Download',
         'price' => '300',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ],
       [
         'Color' => 'Black',
         'Size' =>  'SM',
         'Format' => 'Download',
         'price' => '300',
         'qty' => '1',
         'image' => 'path',
         'image_count' => '0'
       ]
     ];

是我手动创建的静态集合。我希望该集合能够动态创建，从而从上一步中迭代值。请让我知道如何实现这一目标。

请不要根据我的代码来判断我。我有点陌生，我的代码不干净，并且我重复了不遵循干燥原则的代码。