有没有办法在不刷新页面的情况下在电子商务网站中创建“添加到购物车”？

Posted 2023-03-21

【中文标题】有没有办法在不刷新页面的情况下在电子商务网站中创建“添加到购物车”？

【英文标题】：Is there a way to create 'add to cart' in ecommerce website without refreshing the page?

【发布时间】：2021-11-24 23:10:49

【问题描述】：

我的问题解决者。希望你有一个富有成效的一天。我正在开发一个电子商务网站项目，我使用 Laravel 8 来完成它。到目前为止，我已经达到了创建“添加到购物车”的目的，以便客户可以购物。通过阅读不同的教程，我很高兴我可以将产品添加到购物车，编辑和更新它们也可以删除。但我希望它在不刷新页面的情况下工作。正如许多教程所建议的那样，我使用 Jquery 创建 Ajax 请求。如果我显示我的代码，我想你会很容易理解并提供帮助。

这是我的“加入购物车”链接

<li class="add_to_cart"><a href="javascript:void(0)" data-tippy="Add to cart" onclick="addtocart(<?php echo $product->productID ?>)" data-tippy-placement="top" data-tippy-arrow="true" data-tippy-inertia="true"> <span class="lnr lnr-cart"></span></a></li>

这里是 Ajax 和 Jquery

<script type="text/javascript">

$.ajaxSetup(
    headers: 
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          
 );
    
function quickview(id) 
        
    $.get('/quickview/'+id, function (response) 
        if (response) 
            $("#id").html(response.id);
            $("#brand").html(response.brand);
            $("#productname").html(response.product_name);
            $("#price").html(response.price);
            $("#description").html(response.product_context);
            $("#img").attr('src',response.image);
        
    )


function addtocart(id) 
    var _url = '/product/add-to-cart/'+id;

    $.ajax(
        url: _url,
        method: "GET",
        data: 
            _token: ' csrf_token() ', 
            id: id
        ,
        success: function (response) 
            window.location.reload();
            // I think here is where I stuck,
        ,
        error: function (data) 
            console.log('Error:', data);
        
    );           

</script>

这是我的路线

Route::get('/product/add-to-cart/id', [ProductController::class, 'addToCart'])->name('add.to.cart')->middleware('loggedin');

这里是控制器

public function addToCart($id)

    $product = Product::findOrFail($id);
    $cart = session()->get('cart', []);
    
    if(isset($cart[$id])) 
        $cart[$id]['quantity']++;
     else 
        $cart[$id] = [
                     "name" => $product->product_name,
                     "quantity" => 1,
                     "price" => $product->price,
                     "maelezo" => $product->product_context,
                     "image" => $product->image
         ];
    
       
    session()->put('cart', $cart);

    return response()->json(['success' => true]);

    // return response()->json($cart);
    //return response()->json($cart);

【问题讨论】：

您好，您能解释一下您的具体问题是什么吗，目前您刚刚给我们提供了进度报告

良好的代码缩进将帮助我们阅读代码，更重要的是它会帮助您调试代码Take a quick look at a coding standard 为您自己的利益。您可能会被要求在几周/几个月内修改此代码，最后您会感谢我的。

谢谢。我希望能够将产品添加到购物车，而无需刷新页面。所以问题是当我添加、删除、编辑和更新我的购物车时页面正在刷新。

我认为您可能需要添加preventDefault(); 以阻止表单执行其默认提交操作

是的，您需要使用 SPA 架构并使用 ajax 从服务器请求数据。你必须知道需要实现更多的 javascript 来获得与 ui 的最佳用户交互...

【参考方案1】：

最简单的解决方案是从anchor 标记中删除href 属性。

<li class="add_to_cart">
  <a data-tippy="Add to cart" onclick="addtocart(<?php echo $product->productID ?>)" data-tippy-placement="top" data-tippy-arrow="true" data-tippy-inertia="true"> 
    <span class="lnr lnr-cart"></span>
  </a>
</li>

其他解决方案是使用按钮或简单的跨度自定义设计按钮更改锚标记。

<button onclick="addtocart(<?php echo $product->productID ?>)">add to cart </button>

在表单中添加按钮或input type='submit' 将提交表单，因此请注意这一点。

它是如何工作的

function showmsg1()
  document.getElementById("msg").innerText = 'hello, you clicked button without refresh';


function showmsg2()
  document.getElementById("msg").innerText = 'hello, you clicked button now it will refresh, this is hell...!';

<h1> hello, wassup</h1>

<h3> click on buttons </h3>

<span> Without refresh: </span> <a onclick="showmsg1()"> <button>click me</button></a><br/>

<span> With refresh: </span><a onclick="showmsg2()" href=""> <button> click me </button> </a><br/>

<span id="msg"></span>

【讨论】：

好细节@MohammedKhurram。但问题是，当客户将商品添加到 CART 时，我的会话可以很好地存储数据，除非在我刷新页面之前它不会同时回显这些数据。因此，会话能够在不刷新页面的情况下存储甚至超过五个项目的详细信息，但会话无法回显它们，除非我刷新整个页面。这是我卡住的地方

@John 我现在可以理解您的问题，因为您已经简要解释了它。解决方案是，创建包含购物车设计的新文件，然后在 ajax 调用成功时将其加载到基本页面的分区上，你明白了吗？如果你需要一些示例代码，我可以编写一个。

请给我一些代码

【参考方案2】：

按照你对我之前回答的评论回答。

工作示例here

示例 HTML

    Click on buttons<br/>
    
    <span>Item btn1  <button onclick="addtocart(this)" class="btn btn-primary" id="btn1" value="btn1">Add to/Remove from cart</button></span><br/><br/>
    <span>Item btn2  <button onclick="addtocart(this)" class="btn btn-primary" id="btn2" value="btn2">Add to/Remove from cart</button></span><br/><br/>
    <span>Item btn3  <button onclick="addtocart(this)" class="btn btn-primary" id="btn3" value="btn3">Add to/Remove from cart</button></span><br/><br/>
    <span>Item btn4  <button onclick="addtocart(this)" class="btn btn-primary" id="btn4" value="btn4">Add to/Remove from cart</button></span><br/><br/>
    <span>Item btn5  <button onclick="addtocart(this)" class="btn btn-primary" id="btn5" value="btn5">Add to/Remove from cart</button></span><br/><br/>
    <div id="sessions"></div>

脚本

//Laoding the dynamic page on document ready
$(document).ready(function()
  $("#sessions").load("showSession.php");
);
//function to add to cart 
function addtocart(e)
  val = e.value;
  $.post("sessions.php",type: "addtocart", value : val,function(data, status)
    if(status == "success")
      $("#sessions").load("showSession.php");//Laoding the dynamic page once added/removed
    
  );

如有任何疑问，请发表评论。

【讨论】：

你的方法就是我想要的一切。感谢大家的贡献，我真的很感激。

您可以考虑支持/接受答案以供将来参考，它可以帮助其他人:) @John