There are 2 sites on the same domain: OpenCart and static html site. On the site OpenCart there is a basket with a counter of goods, when you click on it, the goods that are there pop up. How can I insert it on a static site so that it takes information from OpenCart? I tried to insert the basket code, but it is clear that there is no functionality there, since PHP variables are used there. Here is the cart code (cart.tpl file):

<div id="cart" class="btn-group btn-block"> <button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total"><?php echo $text_items; ?></span></button> <ul class="dropdown-menu pull-right"> <?php if ($products || $vouchers) { ?> <li> <table class="table table-striped"> <?php foreach ($products as $product) { ?> <tr> <td class="text-center"><?php if ($product['thumb']) { ?> <a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-thumbnail" /></a> <?php } ?></td> <td class="text-left"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a> <?php if ($product['option']) { ?> <?php foreach ($product['option'] as $option) { ?> <br /> - <small><?php echo $option['name']; ?> <?php echo $option['value']; ?></small> <?php } ?> <?php } ?> <?php if ($product['recurring']) { ?> <br /> - <small><?php echo $text_recurring; ?> <?php echo $product['recurring']; ?></small> <?php } ?></td> <td class="text-right">x <?php echo $product['quantity']; ?></td> <td class="text-right"><?php echo $product['total']; ?></td> <td class="text-center"><button type="button" onclick="cart.remove('<?php echo $product['cart_id']; ?>');" title="<?php echo $button_remove; ?>" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td> </tr> <?php } ?> <?php foreach ($vouchers as $voucher) { ?> <tr> <td class="text-center"></td> <td class="text-left"><?php echo $voucher['description']; ?></td> <td class="text-right">x&nbsp;1</td> <td class="text-right"><?php echo $voucher['amount']; ?></td> <td class="text-center text-danger"><button type="button" onclick="voucher.remove('<?php echo $voucher['key']; ?>');" title="<?php echo $button_remove; ?>" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td> </tr> <?php } ?> </table> </li> <li> <div> <table class="table table-bordered"> <?php foreach ($totals as $total) { ?> <tr> <td class="text-right"><strong><?php echo $total['title']; ?></strong></td> <td class="text-right"><?php echo $total['text']; ?></td> </tr> <?php } ?> </table> <p class="text-right"><a href="<?php echo $cart; ?>"><strong><i class="fa fa-shopping-cart"></i> <?php echo $text_cart; ?></strong></a>&nbsp;&nbsp;&nbsp;<a href="<?php echo $checkout; ?>"><strong><i class="fa fa-share"></i> <?php echo $text_checkout; ?></strong></a></p> </div> </li> <?php } else { ?> <li> <p class="text-center"><?php echo $text_empty; ?></p> </li> <?php } ?> </ul> </div>

This button is open

this button is open

 var cart = { 'add': function(product_id, quantity) { $.ajax({ url: 'index.php?route=checkout/cart/add', type: 'post', data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { $('.alert, .text-danger').remove(); if (json['redirect']) { location = json['redirect']; } if (json['success']) { $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); $('html, body').animate({ scrollTop: 0 }, 'slow'); $('#cart > ul').load('index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'update': function(key, quantity) { $.ajax({ url: 'index.php?route=checkout/cart/edit', type: 'post', data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') { location = 'index.php?route=checkout/cart'; } else { $('#cart > ul').load('index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'remove': function(key) { $.ajax({ url: 'index.php?route=checkout/cart/remove', type: 'post', data: 'key=' + key, dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') { location = 'index.php?route=checkout/cart'; } else { $('#cart > ul').load('index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); } } var voucher = { 'add': function() { }, 'remove': function(key) { $.ajax({ url: 'index.php?route=checkout/cart/remove', type: 'post', data: 'key=' + key, dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') { location = 'index.php?route=checkout/cart'; } else { $('#cart > ul').load('index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); } } var wishlist = { 'add': function(product_id) { $.ajax({ url: 'index.php?route=account/wishlist/add', type: 'post', data: 'product_id=' + product_id, dataType: 'json', success: function(json) { $('.alert').remove(); if (json['redirect']) { location = json['redirect']; } if (json['success']) { $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); } $('#wishlist-total span').html(json['total']); $('#wishlist-total').attr('title', json['total']); $('html, body').animate({ scrollTop: 0 }, 'slow'); }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'remove': function() { } } var compare = { 'add': function(product_id) { $.ajax({ url: 'index.php?route=product/compare/add', type: 'post', data: 'product_id=' + product_id, dataType: 'json', success: function(json) { $('.alert').remove(); if (json['success']) { $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); $('#compare-total').html(json['total']); $('html, body').animate({ scrollTop: 0 }, 'slow'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'remove': function() { } }

Cart add remove functions

  • Comments are not intended for extended discussion; conversation moved to chat . - PashaPash ♦

1 answer 1

Pulled the item data like this:

 <?php $opts = array('http' => array('header'=> 'Cookie: ' . $_SERVER['HTTP_COOKIE']."\r\n")); $context = stream_context_create($opts); $contents = file_get_contents('http://test1.ru', false, $context); $first_step = explode( '<!-- cart -->' , $contents ); $second_step = explode("<!-- cart end -->" , $first_step[1] ); ?>

Then, thanks to @ Alex78191, I replaced in the \ catalog \ view \ javascript \ common.js

 // Cart add remove functions var baseUrl = "http://test1.ru/"; var cart = { 'add': function(product_id, quantity) { $.ajax({ url: baseUrl + 'index.php?route=checkout/cart/add', type: 'post', data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { $('.alert, .text-danger').remove(); if (json['redirect']) { location = json['redirect']; } if (json['success']) { $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); $('html, body').animate({ scrollTop: 0 }, 'slow'); $('#cart > ul').load(baseUrl + 'index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'update': function(key, quantity) { $.ajax({ url: baseUrl + 'index.php?route=checkout/cart/edit', type: 'post', data: 'key=' + key + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1), dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') { location = baseUrl + 'index.php?route=checkout/cart'; } else { $('#cart > ul').load(baseUrl + 'index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'remove': function(key) { $.ajax({ url: baseUrl + 'index.php?route=checkout/cart/remove', type: 'post', data: 'key=' + key, dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') { location = baseUrl + 'index.php?route=checkout/cart'; } else { $('#cart > ul').load(baseUrl + 'index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); } } var voucher = { 'add': function() { }, 'remove': function(key) { $.ajax({ url: baseUrl + 'index.php?route=checkout/cart/remove', type: 'post', data: 'key=' + key, dataType: 'json', beforeSend: function() { $('#cart > button').button('loading'); }, complete: function() { $('#cart > button').button('reset'); }, success: function(json) { // Need to set timeout otherwise it wont update the total setTimeout(function () { $('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>'); }, 100); if (getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') { location = baseUrl + baseUrl + 'index.php?route=checkout/cart'; } else { $('#cart > ul').load(baseUrl + 'index.php?route=common/cart/info ul li'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); } } var wishlist = { 'add': function(product_id) { $.ajax({ url: baseUrl + 'index.php?route=account/wishlist/add', type: 'post', data: 'product_id=' + product_id, dataType: 'json', success: function(json) { $('.alert').remove(); if (json['redirect']) { location = json['redirect']; } if (json['success']) { $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); } $('#wishlist-total span').html(json['total']); $('#wishlist-total').attr('title', json['total']); $('html, body').animate({ scrollTop: 0 }, 'slow'); }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'remove': function() { } } var compare = { 'add': function(product_id) { $.ajax({ url: baseUrl + 'index.php?route=product/compare/add', type: 'post', data: 'product_id=' + product_id, dataType: 'json', success: function(json) { $('.alert').remove(); if (json['success']) { $('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>'); $('#compare-total').html(json['total']); $('html, body').animate({ scrollTop: 0 }, 'slow'); } }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); }, 'remove': function() { } }

I describe: created a variable var baseUrl = "http://test1.ru/"; then everywhere, 'index.php?route=checkout/cart/add' replaced with baseUrl + 'index.php?route=checkout/cart/add' . Well, in the right place for me in the html site I brought <?php echo $second_step[0]; ?> <?php echo $second_step[0]; ?> And also on a static site, do not forget to include the file <script src="../catalog/view/javascript/common.js"></script>

  • PHP does not need to be formatted as a fragment of code in JavaScript / HTML / CSS. JS in this case too. - Alex78191