At the Japanese company I work at, I manage their e-commerce site selling their product on Yahoo! Shopping. While I do have a Diploma in Internet Computing, it helps to remember I graduated in 2003, which means, my programming knowledge is already 15 years old (i.e. not the most updated). Thankfully, I retained most of the programming logic picked up during my 3 years at Temasek Polytechnic and it comes in handy while I do my research in creating websites.
This entry might not be applicable to most people already reading this blog, but because I had trouble finding similar information online in Japanese or English, I decided documenting this might be able to help one or two souls some time in the not-too-far-away future who might come across a similar situation.
The way our company sells items is not that straightforward. It’s not just a purchase of “1” item or “2” items that consumers can enter into the quantity field provided by the e-commerce site. So we created our own calculator and made use of Yahoo!’s API to send required data to the shopping cart. Consumers have to use our calculator on the item page, enter the necessary information, and then the calculator will generate the numbers and information that is necessary for us to process the order. The information will then be sent to the shopping cart without the consumer having to perform any cumbersome actions that may confuse them.
Here comes the problem: Our calculator is inserted using an <iframe> below Yahoo!’s default quantity field and add-to-cart button (hereafter “default UI”). While we wrote instructions to use the calculator below instead, there are consumers who go by intuition and use the default UI at the top. In that case, we will not have the required information to process the order.
Yahoo! doesn’t offer a setting to hide the default UI, so I initially created a button floating over it to cover it up to make users use the calculator below. However, as Yahoo! started adding features and content into the product page, my button started to shift away from the original spot. Updating the position to cover the default UI then became a hassle and I began wondering if there are other ways to remove the default UI once and for all. Turns out, my old brain still works not too badly, and I figured you could use CSS to hide the content.
If you look at Inspect Element, you would notice that the default UI is nicely wrapped up into a class called mdItemInfoCartButton.
So, the idea is to just hide the div the default UI is in with the following CSS.
.mdItemInfoCartButton{
display:none;
}
Note that, this is assuming you already have Yahoo! Triple, as the only way you can upload your own CSS file is to the Yahoo! Triple server and then insert the following code into the additional free space that Yahoo! allows you (almost) free rein to edit.
<link rel="stylesheet" href="https://shopping.geocities.jp/yourshopname/css/hide.css" >
The Triple server costs 3,000 yen a month and you need that to insert iframes as well because Yahoo! doesn’t allow external URLs to be linked on their site. This means, you can’t insert a YouTube iframe either. The way to do it would be to embed the YouTube video onto an HTML file, upload it to Yahoo! Triple and then insert your HTML file into Yahoo! Shopping as an iframe.
I don’t foresee this category to be expanded with much content but every now and then when I come across something I need to know and can’t find online, I may just write it here.
