How could a customer order an item with 'add to cart' button disappeared.

[yoonlaser]

hello,

We have some products without the 'add to cart' button enabled.
Somehow a customer orders 3 units of an item, but the item didn't have 'add to cart' button and the price is set to $0 in the backend.
I contacted Shopify support for log or anything to get a hint, but haven't got the answer yet.
How could it be possible? The customer used the Shop Pay link to check out. 

If the customer puts the item in the cart and if there was a price update or anything after that, then does it make sense?
Any opinions or clues are welcome.

Thank you!

[beauxbreaux]

Very easily. So there is actually a console people can use built inside every web browser. You have access to it yourself. Press F12 on your keyword. Under this you will see a tab called Console. People can type in functions to run simple actions but they can also edit the code in the browser (locally) by going into the elements tab. Most serious security issues are all protected and hidden within the backend. A button is front end code and very easily shown or even created by using these dev tools. You of course can at least cancel the order. I would suggest putting 0 inventory in for this unit or if you tell me more about what you are using this product for I may have an idea for a better solution. 

[yoonlaser]

I used a different page template for 'call for pricing' items. so there's no action button in the page from the product page template.

I just inspected if the button could be hidden in the dev tool > element, but I couldn't find one there.
I don't think it's possible to activate the button from the dev tool.

Thanks for your opinion!

[beauxbreaux]

You can try it out and see. So essentially you can inject a button into that page with javascript. You can try it out on one of my ecommerce stores.

Here is the product page: https://cbmtools.com/products/milwaukee-3050-21-m12-fuel-12v-insider-extended-reach-box-ratchet-kit

Here is the code to enter into the console just copy paste and hit enter:

var btn = document.createElement("button");
btn.setAttribute("type", "submit");
btn.setAttribute("name", "add");
btn.setAttribute("aria-label", "Add to cart");
btn.setAttribute("class", "btn product-form__cart-submit btn--primary");
btn.setAttribute("data-add-to-cart", "");

var spanText = document.createElement("span");
spanText.setAttribute("data-add-to-cart-text", "");
spanText.innerHTML = "Add to cart";

var svgBasket = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svgBasket.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svgBasket.setAttribute("aria-hidden", "true");
svgBasket.setAttribute("focusable", "false");
svgBasket.setAttribute("role", "img");
svgBasket.setAttribute("viewBox", "0 0 576 512");
svgBasket.setAttribute("class", "icon icon--basket svg-inline--fa fa-shopping-basket fa-w-18");

// Add path to the SVG for the basket icon
var pathBasket = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathBasket.setAttribute("fill", "currentColor");
pathBasket.setAttribute("d", "M576 216v16c0 13.255-10.745 24-24 24h-8l-26.113 182.788C514.509 462.435 494.257 480 470.37 480H105.63c-23.887 0-44.139-17.565-47.518-41.212L32 256h-8c-13.255 0-24-10.745-24-24v-16c0-13.255 10.745-24 24-24h67.341l106.78-146.821c10.395-14.292 30.407-17.453 44.701-7.058 14.293 10.395 17.453 30.408 7.058 44.701L170.477 192h235.046L326.12 82.821c-10.395-14.292-7.234-34.306 7.059-44.701 14.291-10.395 34.306-7.235 44.701 7.058L484.659 192H552c13.255 0 24 10.745 24 24zM312 392V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24zm112 0V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24zm-224 0V280c0-13.255-10.745-24-24-24s-24 10.745-24 24v112c0 13.255 10.745 24 24 24s24-10.745 24-24z");
svgBasket.appendChild(pathBasket);

// Append span and svg to the button
btn.appendChild(spanText);
btn.appendChild(svgBasket);

// Functionality for adding to cart
btn.onclick = function() {
    fetch('/cart/add.js', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            items: [{
                id: '44388075372763', 
                quantity: 1
            }]
        })
    })
    .then(response => response.json())
    .then(data => console.log('Product added to cart:', data))
    .catch(error => console.error('Error:', error));
};

// Append the button to the page
document.body.appendChild(btn);

Now of course my page already has a button available but we are creating a new checkout button that will append to the bottom of the page. When you click enter it wont show up in the actual cart but click checkout and you will see the product there. You can reproduce this by changing the line id: '44388075372763' to the product id. The id is found in in the code by searching for (variant-id=")

I have not tested this on a page without the button but I imagine it would still work.