Add to basket html

Add To Cart Interaction

A floating cart that slides in when the user decides to buy an item.

We’re used to different patterns when it comes to the “add to cart” process. The basic idea behind this pattern is to notify the user that an item has been added to the cart, and provide them with a link to proceed to the checkout.

We’ve been experimenting with the idea of hiding the cart by default, and showing it when the user clicks the “add to cart” button. This way the user can either check the cart and proceed to checkout or continue shopping. The cart will stick to the bottom of the page, accessible at any time.

👋 Important: this experiment is built using the CodyHouse Framework.

Creating the structure

The cart HTML structure is composed of two main elements: a .cd-cart__trigger for the cart trigger and the cart total, and a .cd-cart__content for the cart content.

The unordered list inside the .cd-cart__body element is empty by default (empty cart); when a product is added to the cart, a list item element is inserted using JavaScript.

Product Name
$25.99
Delete
Qty12

Adding style

The .cd-cart__content and .cd-cart__trigger elements are both in position fixed and moved outside the viewport (using a translateY ). When an item is added to the cart, the .cd-cart—empty class is removed from the .cd-cart element and the cart is shown.

.cd-cart__trigger, .cd-cart__content < position: fixed; bottom: 20px; right: 5%; transition: transform .2s; >.cd-cart--empty .cd-cart__trigger, .cd-cart--empty .cd-cart__content < // hide cart transform: translateY(150px); >

As for the cart animation: we assign a fixed height and width to the div.cd-cart__layout element (the same of the a.cd-cart__trigger ); when the cart is open, we use the .cd-cart—open class to animate its height and width while revealing the cart content.

.cd-cart__layout < position: absolute; bottom: 0; right: 0; z-index: 2; overflow: hidden; height: 72px; width: 72px; border-radius: var(--radius); transition: height .4s .1s, width .4s .1s, box-shadow .3s; transition-timing-function: cubic-bezier(.67,.17,.32,.95); background: var(--cd-color-3); box-shadow: 0 4px 30px rgba(#000, .17); >.cd-cart--open .cd-cart__layout

The .cd-cart__product—deleted class is used to remove an item from the cart: the deleted element has an absolute position, and the cd-item-slide-out animation is used to create the slide-out effect.

.cd-cart__product--deleted < // this class is added to an item when it is removed form the cart position: absolute; left: 0; width: 100%; opacity: 0; animation: cd-item-slide-out .3s forwards; >@keyframes cd-item-slide-out < 0% < transform: translateX(0); opacity: 1; >100% < transform: translateX(80px); opacity: 0; >>

If the user clicks on ‘Undo’, the .cd-cart__product—deleted class is removed and the element is reinserted in the list.

Events handling

When the user clicks the .js-cd-add-to-cart button, the addProduct() function is used to insert a new list item inside the .cd-cart__body > ul element. The product details used are placeholders, which should be replaced by the real product info:

function addProduct(target) < // this is just a product placeholder var productAdded = '
Product Name
$25.99
Delete
Qty123456789
'; cartList.insertAdjacentHTML('beforeend', productAdded); >;

Additional functions, like the updateCartCount() or updateCartTotal() , have been defined to update the cart count and total when new products are added/deleted or when the quantity of a product added to the cart is changed.

Cookie Compliance

We use cookies to give you the best possible website experience. By using CodyHouse, you agree to our Privacy Policy.

Источник

Битрикс добавление в корзину

В Битриксе существует стандартное добавление товара в корзину, но намного проще использовать свое решение добавления в корзину, используя функции Битрикс.

Добавление в корзину может быть в разделе каталога, а может быть на детальной странице товара.

Данная статья создана для примера, все равно придется код адаптировать, ведь верстка у каждого сайта своя.

1. Добавление в корзину на странице раздела каталога.

Для начала в коде в шаблоне будь то catalog.section или catalog.item в самом шаблоне вывести id товара.

Например в файле catalog.item/.default/card/template.php находим строчку 359.

Затем в строчке 359 найти и добавить код добавления в корзину.

Там где кнопка button добавим специальный класс, который будет отличаться, button-cart11

Создадим файл script.js и положим его в любом месте, например в самой папке с шаблоном. Подключим в футере файл script.js

///Правильное подключение $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/script.js"); /////Вот так подключать неправильно:  

Теперь заполним сам файл script.js.

$(document).ready(function() < $('.button-cart11').on('click', function(event) < event.preventDefault(); var $this = $(this); var prodId = parseInt($this.data('ids')); var cartAddUrl = $this.data('url'); var cnt = $this.data('count');; var ajaxDataSend = < OFFER_ID: prodId, QUANTITY: cnt, AJAX_ADD_TO_BASKET_WITH_DOP: 'Y', >; ///console.log(ajaxDataSend); $.ajax(< url:cartAddUrl, type: 'POST', data: ajaxDataSend, >) .done(function(data) < var data = $.parseJSON(data); if(data.RESPONSE == 'OK')< BX.onCustomEvent('OnBasketChange'); // Обновляем корзину //здесь уже Ваше модальное окно с уведомлением об успешном добавлении alert("Товар успешно добавлен в корзину"); /// modal.style.display = "block"; >>) .fail(function() < //console.log("error"); >) .always(function() < //console.log("complete"); >); ///также нужно добавить прибавление и убавление товара. здесь уже в каждой верстке свои классы, код примерный $('.product_summ .counter_plus').on('click', function (e) < var price = $('.products_variants input[name=1]:checked').attr('data-price'); if(price == undefined)< price = $('#price_current_none_offer').html(); >var count = $('.product_summ .counter_counter').html(); $('#btn_basket_add').attr('data-count', count); var result = Number(price) * Number(count); result = result.toFixed(); $('.product_summ .product_summ span').html(result + ' p'); console.log(price); >); $('.product_summ .counter_minus').on('click', function (e) < var price = $('.products_variants input[name=1]:checked').attr('data-price'); if(price == undefined)< price = $('#price_current_none_offer').html(); >var count = $('.product_summ .counter_counter').html(); if(Number(count) < Number(1))< return false; >var count = $('.product_summ .counter_counter').html(); $('#btn_basket_add').attr('data-count', count); var result = Number(price) * Number(count); result = result.toFixed(); $('.product_summ .product_summ span').html(result + ' p'); console.log(price); >); >);

Можно вывести в модальном окне уведомление. Но код служит примером, все доработки можно делать по своему желанию.

Далее создадим сам файл в папке /local/templates/Шаблон вашего сайта/ajax/add2basket.php (или /bitrix/templates/Шаблон вашего сайта/)

getSite(); $CURRENCY_CODE = CurrencyManager::getBaseCurrency(); //Форма магазина if( isset($_REQUEST["AJAX_ADD_TO_BASKET_WITH_DOP"]) && $_REQUEST["AJAX_ADD_TO_BASKET_WITH_DOP"] == "Y" ) < // $request = Context::getCurrent()->getRequest(); $OFFER_ID = intval($request->get("OFFER_ID")); $QUANTITY = intval($request->get("QUANTITY")); $PRODUCT = CIBlockElement::GetByID(/*CCatalogSku::GetProductInfo(*/$OFFER_ID/*)['ID']*/)->GetNext(); // Получение корзины для текущего пользователя $basket = \Bitrix\Sale\Basket::loadItemsForFUser( \Bitrix\Sale\Fuser::getId(), \Bitrix\Main\Context::getCurrent()->getSite() ); if($QUANTITY > 1) $QUANTITY = $QUANTITY; else $QUANTITY = 1; if ($item = $basket->getExistsItem('catalog', $PRODUCT["ID"]))< //Обновление товара в корзине $item->setField('QUANTITY', $item->getQuantity() + $QUANTITY); >else< //Добавление товара $item = $basket->createItem('catalog', $PRODUCT["ID"]); $item->setFields([ 'QUANTITY' => $QUANTITY, 'CURRENCY' => \Bitrix\Currency\CurrencyManager::getBaseCurrency(), 'LID' => \Bitrix\Main\Context::getCurrent()->getSite(), 'PRODUCT_PROVIDER_CLASS' => \Bitrix\Catalog\Product\Basket::getDefaultProviderName() , ]); > //Сохранение изменений $basket->save(); echo json_encode(Array('RESPONSE' => 'OK')); > require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php"); die();

Рассмотрим подробнее код. Здесь получаем со скрипта ID товара и производим его обновление, если число больше 1, или добавление, если товара еще нету в корзине.

Если на сайте установлены торговые предложения, то в строке $PRODUCT необходимо раскоментировать код, и передавать ID торгового предложения на первом шаге. Если просто товар (как в этом примере), то ничего менять не нужно.

2. Добавление в корзину на детальной странице товара.

Данный код можно использовать и на детальной странице товара, необходимо только сохранить вложенность тегов.

В каталоге, где находятся и выводятся товары находим кнопку добавления «В корзину» и делаем ее примерно такой.

Еще на детальной странице порой выводятся торговые предложения. Для того, чтобы добавлять торговые предложения, нужно вывести торговые предложения, и передавать значения ID выбранного торгового предложения в дата атрибут ids (data-ids) используя JS или JQuery или любую другую библиотеку.

Также можно на детальной карточке товара использовать стандартный шаблон и стандартное Битрикс добавление товара в корзину.

Кастомизировать такой шаблон проще, чем в разделе.

На этом все, надеюсь информация была полезной.

Источник

Create Add To Cart Button Using HTML Code

Hello, coders! The Add To Cart Button animation construction process is illustrated in this article using HTML and CSS Code. Our website’s visual appeal is enhanced by the animation of the add-to-cart button. The Add to Cart button animation is extremely quick and straightforward using Html Code.

Building an online store may benefit from this initiative. To entice people to engage with our website and provide positive feedback, that “add to basket” button animation might be implemented.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

Html Updated output for add to cart button.

Add To Cart Button Css Code:-

.button < --background: #362a89; --text: #fff; --cart: #fff; --tick: var(--background); position: relative; border: none; background: none; padding: 8px 28px; border-radius: 8px; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); overflow: hidden; cursor: pointer; text-align: center; min-width: 144px; color: var(--text); background: var(--background); transform: scale(var(--scale, 1)); transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); >.button:active < --scale: 0.95; >.button span < font-size: 14px; font-weight: 500; display: block; position: relative; padding-left: 24px; margin-left: -8px; line-height: 26px; transform: translateY(var(--span-y, 0)); transition: transform 0.7s ease; >.button span:before, .button span:after < content: ''; width: var(--w, 2px); height: var(--h, 14px); border-radius: 1px; position: absolute; left: var(--l, 8px); top: var(--t, 6px); background: currentColor; transform: scale(0.75) rotate(var(--icon-r, 0deg)) translateY(var(--icon-y, 0)); transition: transform 0.65s ease 0.05s; >.button span:after < --w: 14px; --h: 2px; --l: 2px; --t: 12px; >.button .cart < position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -18px; transform-origin: 12px 23px; transform: translateX(-120px) rotate(-18deg); >.button .cart:before, .button .cart:after < content: ''; position: absolute; >.button .cart:before < width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--cart); bottom: 0; left: 9px; filter: drop-shadow(11px 0 0 var(--cart)); >.button .cart:after < width: 16px; height: 9px; background: var(--cart); left: 9px; bottom: 7px; transform-origin: 50% 100%; transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0)); transition: transform 1.2s ease var(--fill-d); >.button .cart svg < z-index: 1; width: 36px; height: 26px; display: block; position: relative; fill: none; stroke: var(--cart); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; >.button .cart svg polyline:last-child < stroke: var(--tick); stroke-dasharray: 10px; stroke-dashoffset: var(--offset, 10px); transition: stroke-dashoffset 0.4s ease var(--offset-d); >.button.loading < --scale: 0.95; --span-y: -32px; --icon-r: 180deg; --fill: 1; --fill-d: 0.8s; --offset: 0; --offset-d: 1.73s; >.button.loading .cart < animation: cart 3.4s linear forwards 0.2s; >@keyframes cart < 12.5% < transform: translateX(-60px) rotate(-18deg); >25%, 45%, 55%, 75% < transform: none; >50% < transform: scale(0.9); >44%, 56% < transform-origin: 12px 23px; >45%, 55% < transform-origin: 50% 50%; >87.5% < transform: translateX(70px) rotate(-18deg); >100% < transform: translateX(140px) rotate(-18deg); >> html < box-sizing: border-box; -webkit-font-smoothing: antialiased; >* < box-sizing: inherit; >*:before, *:after < box-sizing: inherit; >body < min-height: 100vh; display: flex; font-family: 'Inter UI', 'Inter', Arial; justify-content: center; align-items: center; background: #eceffc; >body .dribbble < position: fixed; display: block; right: 20px; bottom: 20px; >body .dribbble img < display: block; height: 28px; >body .twitter < position: fixed; display: block; right: 64px; bottom: 14px; >body .twitter svg

we’ll utilise some simple CSS code to add styling to our webpage. It will be simple for you to understand and attempt to incorporate your own style, which will assist you clarify your concepts. The CSS will be explained step by step.

Step1:We will style our button before adding styling to our project (.container). We’ll make advantage of the class selector to achieve this. The button will have a blue background thanks to the background attribute, and its pointer will be set to cursor. We will centre the text by utilising the text-align property to align it to the button’s relative position.

Step2: The minimum height will be added using the body tag selector, the display property will be set to “flex,” the font-family property will be used to centre the items, the background property will be used to add a violet background to the body, and the class selector will be used to add a width and height of “32px” to our shopping button.

Html CSS Updated output for add to cart button.

Add To Cart Button JavaScript Code:-

document.querySelectorAll('.button').forEach(button => button.addEventListener('click', e => < if(!button.classList.contains('loading')) < button.classList.add('loading'); setTimeout(() =>button.classList.remove('loading'), 3700); > e.preventDefault(); >));

The document will be used to pick the “add-to-cart-button” class. The function for each element will be used to add querySelectorAll(), a method, and an event listener to the button. Users will add the “added” class, which is specified in our CSS, to the button when they click it. Using the SetTimeout() method, our class will become inactive after 2000 milliseconds.

The Add To Cart Button Animation was created using HTML, CSS, CSS, and Javascript, and the project is now complete. Look at the live preview right now.

Final Output Of Add To Cart Button Using HTML CSS:-

Video Output:

Now that we have completed our javascript section for add to cart button, our updated output with javascript. Hope you like the Add To Cart Button Animation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!

This post teaches us how to create an Add To Cart Button Animation using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Источник