No products in the cart.
Forum Replies Created
- Posts
-
You may not need to actually add a class at all. You can select the child divs directly based on the attribute and set the styling on the elements from there.
Here’s an example targeting the
difficulty="4"set of elements:.difficulty-wrapper[data-difficulty="4"] > span.difficulty-item { font-weight: 800; color: #C00; }<div class="difficulty-wrapper" data-difficulty="1"> <span class="difficulty-item">1-1</span> <span class="difficulty-item">1-2</span> <span class="difficulty-item">1-3</span> <span class="difficulty-item">1-4</span> </div> <div class="difficulty-wrapper" data-difficulty="4"> <span class="difficulty-item">4-1</span> <span class="difficulty-item">4-2</span> <span class="difficulty-item">4-3</span> <span class="difficulty-item">4-4</span> </div><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Difficulty Scale</title> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <style> .difficulty-item { /* Add your styling for difficulty items here */ display: inline-block; width: 20px; height: 20px; background-color: #ccc; margin: 2px; } .active { /* Add your styling for active difficulty items here */ background-color: #00f; /* Change the background color for active items */ } </style> </head> <body> <div class='difficulty-wrapper' data-difficulty='1'> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> </div> <div class='difficulty-wrapper' data-difficulty='4'> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> <span class='difficulty-item'></span> </div> <script> $(document).ready(function() { // Iterate through each difficulty-wrapper $('.difficulty-wrapper').each(function() { // Get the data-difficulty attribute value var difficulty = $(this).data('difficulty'); // Find the corresponding difficulty-item elements and add the "active" class to them $(this).find('.difficulty-item:lt(' + difficulty + ')').addClass('active'); }); }); </script> </body> </html>This script uses jQuery to iterate through each .difficulty-wrapper element, retrieves the data-difficulty value, and adds the "active" class to the corresponding number of .difficulty-item elements within that wrapper. The :lt() selector is used to select elements with an index less than the specified value (in this case, the difficulty level).
To transform the other fields into a nested object, you can modify the data preparation process. You’ll need to split the field names and structure the object accordingly. Here’s a function you can use:
function transformFormData(formData) { const data = {}; for (let [key, value] of formData.entries()) { if (key.startsWith('other[')) { const nestedKey = key.substring(key.indexOf('[') + 1, key.indexOf(']')); if (!data['other']) { data['other'] = {}; } data['other'][nestedKey] = value; } else { data[key] = value; } } return data; }data; }Replace your current data preparation process with this function:
const data = transformFormData(new FormData(this.form));This function iterates through the form data entries and checks if the key starts with ‘other’. If it does, it extracts the nested key (like ‘a’ or ‘b’) and structures the object accordingly. Otherwise, it stores the key-value pair directly in the main object.
You can always check validity after parsing, then try parsing again.
import { DateTime } from 'luxon'; function parseUKDateWithOptionalTime(s: string) : DateTime { let dt = DateTime.fromFormat(s, 'dd/MM/yyyy h:mm:ss a'); if (!dt.isValid) { dt = DateTime.fromFormat(s, 'dd/MM/yyyy'); } return dt; }Though – do keep in mind that when you parse a date without a time into a Luxon
DateTimeobject, you’re implying that you want the time to be 00:00 (midnight). Fundamentally, that’s a different concept than a date (which would include all times within the day, not just midnight). The JavaScriptDateobject has the same issue (it’s really a timestamp, not a date).Thus, you might consider not using this function, but instead breaking apart your business logic into different paths. Ask yourself what it actually means when someone provides a whole date and how that differs than providing a date and time. For example, a whole date might indicate a birth day to acknowledge any time within the day, or a business day in which a discount is valid through the end of the day. Whereas a date and time usually indicates an exact point at which something occurred or will occur.
So the simple way to loop through all the metafields is here:
CONDITIONS To loop through metafields, you should keep the same namespace, by default Shopify sets "custom" namespace to all metafields. You can keep anything while creating a metafield. Let’s assume we will loop through all the metafields with the namespace added as "option", so we have
product.metafields.option.KEY.{% for metafield in product.metafields.option %} {% assign key = metafield[0] %} {% assign type = product.metafields.option[key].type %} <!--// Now you got the meta-field's KEY & TYPE, handle it according to its access syntax; for example below, I am printing text of type text-multiline(list.single_line_text_field) meta-field values --> {% assign values = product.metafields.option[key].value %} {% for value in values %} {{ value }} {% endfor %} {% endfor %}After all of these years I think it will be easy to get the Shop domain from the below method
new URLSearchParams(location.search).get('shop')This code snippet will get you the Shop domain of the currently installed shop.
Warning: CentOS 7 is close to its end of life in a few months, so I recommend a more recent version, EL-8 or EL-9, especially for modern features such as PHP 8.x
For a proper repository configuration and usage, you have to follow the Wizard instructions
At least, you need to enable the remi-php81 repository
- If install magento follow this way https://experienceleague.adobe.com/docs/commerce-operations/installation-guide/composer.html?lang=en, Magento\Catalog\Model\Category should be vendor/magento/module-catalog/Model/Category.php
- for the magento2 github, it should be https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Catalog/Model/Category.php
In my case, nighter
woocommerce_checkout_create_orderor thewoocommerce_checkout_update_order_metaaction hook worked. Order confirmation emails were still showing the original shipping address.I needed to use
woocommerce_email_customer_detailsin order to get the emails to show the right shipping address.add_action('woocommerce_email_customer_details', 'email_confirmation_display_order_items', 10, 4); function email_confirmation_display_order_items( $order, $sent_to_admin, $plain_text, $email): void { $order->update_meta_data('_shipping_address_1', {{'the value here'}} ); $order->update_meta_data('_shipping_address_2', {{'the value here'}} ); $order->update_meta_data('_shipping_postcode', {{'the value here'}}); $order->update_meta_data('_shipping_city', {{'the value here'}} ); $order->save(); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>if you use the ‘http’ it may get blocked
To get WooCommerce order details from the order ID using the following line of code:
$order = new WC_Order( $order_id );You can use the following steps:
- Get the order object using the WC_Order() constructor.
- Use the getter methods on the order object to get the order details that you need.
For example, to get the order total, you can use the following code:
$order_total = $order->get_total();To get the order status, you can use the following code:
$order_status = $order->get_status();To get the order billing address, you can use the following code:
$order_billing_address = $order->get_billing_address();To get the order shipping address, you can use the following code:
$order_shipping_address = $order->get_shipping_address();You can also use the get_data() method to get an array of all of the order data. This can be useful if you need to get all of the order details at once.
For example, to get an array of all of the order data, you can use the following code:
$order_data = $order->get_data();Once you have the order data, you can use it however you need. For example, you can display it on your website, save it to a database, or send it to a payment gateway.
This is not an answer but an attempt being shared with community and fellow coder for help because I have worked a lot on this but unresolvable !
I am facing the same issue. Add 1st product to cart, cart appears but nothing inside cart. Add second product to cart–vola ! both products appears !! However, if I use shopify’s regular ‘Add to cart’ button, even first product appears on first attempt of adding it and cart appears ok….
Code of added a new asset JS script called
atc-now.jsis as below. and it is added in theme.liquid appropriately withdeferattribute.Code preamble: I am capturing a .variant-button’s click event for
add-to-cartpurpose inatc-now.jsso that when .variant-button is clicked, item is added to cart drawer and drawer should appear with the product in it.document.addEventListener('DOMContentLoaded', function() { var variantBut = document.querySelector('.variant-button'); variantBut.addEventListener('click', function() { var cart = document.querySelector(".drawer"); let addToCartForms = document.querySelectorAll('form[action$="/cart/add"]'); addToCartForms.forEach((form) => { form.addEventListener("submit", (e) => { e.preventDefault(); let formData = new FormData(e.target); const config = {}; if (cart) { formData.append("sections", cart.getSectionsToRender().map((section) => section.id) ); formData.append("sections_url", window.location.pathname); cart.setActiveElement(document.activeElement); } config.body = formData; fetch(window.Shopify.routes.root + "cart/add.js", {method: "POST", body: formData,}) .then((response) => {return response.json();}) .then((response) => { console.log(response); cart.renderContents(response);}) .catch((error) => {console.error("Error:", error); }); }); }); }); });Figured it out. The user must be set to
bitnami:daemonfor/bitnami/wordpress/wp-contentand all child folders and files.I am facing the
utf8mb4_unicode_520_cithis issue, I resolved it by using.You just need to replace
utf8mb4_unicode_520_ciwithutf8mb4_general_ci
