Integration or New Count Down Feature

ler@singmuiheng.com
Topic Author
Offline

11 years 2 months ago #210427 by ler@singmuiheng.com

Integration or New Count Down Feature was created by ler@singmuiheng.com

-- HikaShop version -- : 2.5.1
-- Joomla version -- : 3.4.3
-- PHP version -- : 5.4

Dear Nicolas

Wonder if hikashop able to made use of this free piece of countdown plugin and implement the function in hikashop? The countdown function demand are getting higher day to day

Or even greater, any simple tweet to have the count down shown in product listing and product page? (Since there is already publish end time control in hikashop)

Please Log in or Create an account to join the conversation.

lionel75
Offline

11 years 1 month ago #210455 by lionel75

Replied by lionel75 on topic Integration or New Count Down Feature

a count down for a product before the price increase ? so hks must handle the change of price refer to date !! .

1) In jed many extension type exist ( Component module plugin ) but many are stand alone or implemented for JEvents, google calendar, ohanah , virtuemart. There is no hikashop countdown extension for hikashop until now ?

2) which are the requirement for a hikashop countdown joomla extension to be use in a hikashop specific product item . Could it be implemented by making a plugin that use 3 custom field ( date date price ) and custom change to the php code that retrieve price ( before render for show product and before compute final price) ?

regards

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

11 years 1 month ago #210457 by Jerome

Replied by Jerome on topic Integration or New Count Down Feature

Hi,

See your other post : www.hikashop.com/forum/development/87854...ay-element-html.html

Regards,

PS : Nicolas is not the only one who reply in the forum

PS N°2 : HikaShop 2.5.1 does not exist (yet).

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Please Log in or Create an account to join the conversation.

ler@singmuiheng.com
Topic Author
Offline

11 years 1 month ago - 11 years 1 month ago #211914 by ler@singmuiheng.com

Replied by ler@singmuiheng.com on topic Integration or New Count Down Feature

To share with every one how countdown can be added using start sale and end sale date using some not proper way.
And hope it was going to add in future version soon as a more mature solutions

1. Install thirdparty extension and enable extensions.joomla.org/profile/extension/...nts/allb4u-countdown .

2. Goto hikashop->display->view->product->listing_img_title (may vary depends on your template and view of listing, i am using image with title listing)

3. Find the line below, should be on line 17 onwards

Code:

if($this->config->get('thumbnail',1)){ ?>
<!-- PRODUCT IMG -->
<div style="height:<?php echo $this->image->main_thumbnail_y;?>px;text-align:center;clear:both;" class="hikashop_product_image">

4. Add the code below, code not tidy up yet, you may clean the unnecessary code

Code:

 <?php 
//date_default_timezone_set('UTC');
if (!empty($this->row->product_sale_end)) {
$this->row->product_sale_end += 7*3600;
$tDiff = $this->row->product_sale_end - time();
$tDiff -= 7*3600;
$days = floor($tDiff / 86400);
$hours = ($tDiff / 3600) % 24;
$mins = ($tDiff / 60) % 60;
$secs = ($tDiff) % 60;

?>
  <div><?php //echo (date("Y-m-d G:i e", $this->row->product_sale_end));?><br/><style>
                        <?php echo "#cntid".$this->row->product_id;?> {
                          font-family: 'Share Tech Mono', serif;
                          color: white;
                          background: hotpink;
                          line-height: 1;
                          display: inline-block;
                          padding: 1px;
                          width: 100%;
                          height: 35px;
                          text-align:center;
                        }
                        <?php echo "#cntid".$this->row->product_id;?> dl {
                          font-size: 2em;
                        }
                        div.countdown dl{
                            margin: 0.4em 0 0 0;
                        }
                        div.countdown dl dt,
                        div.countdown dl dd {
                          display: inline-block;
                          
                          margin: 0;
                        }
                        div.countdown dl dt {
                          position: relative;
						  top: -20px;
    					  font-size: 8px;
                        }
                        div.countdown dl dd {
                          margin-right: 0.4em;
                          min-width: 1.1em;
                        }
                        div.countdown dl dd:after {
                          content: ':';
                        }
                        div.countdown dl dd:last-child:after {
                          content: none;
                        }
                        div.countdown dl dd:nth-of-type(1) {
                          min-width: 1em;
                          margin-left: -0.55em;
                        }
                        div.countdown dl dd:nth-of-type(2) {
                          margin-left: -0.8em;
                        }
                        div.countdown dl dd:nth-of-type(3) {
                          margin-left: -0.6em;
                        }
                        div.countdown dl dd:nth-of-type(4) {
                          margin-left: -0.5em;
                        }

                    </style><div id=<?php echo "'cntid".$this->row->product_id."'";?> class='countdown '><dl class='counttime'><dt class='day'>days</dt><dd class='day'><?php echo $days;?></dd><dt class='hour'>hours</dt><dd class='hour'><?php echo $hours;?></dd><dt class='min'>mins</dt><dd class='min'><?php echo $mins;?></dd><dt class='sec'>secs</dt><dd class='sec'><?php echo $secs;?></dd></dl>         
        <script type='text/javascript'>
                
            jQuery(document).ready(function($) {
                function zeroPadd(intVal, len, space){
                    var result = '' + intVal;
                    var zs = len - result.length;
                    for(var i = 0; i < zs; i++) result = (space? ' ': '0') + result;
                    return result;
                }

                jQuery.fn.reverse = [].reverse;
                setInterval(function(){
                    var carry = 0;
                    $(<?php echo "'#cntid".$this->row->product_id."'";?>).children('dl').children('dd').reverse().each( function(index)
                    {
                        var num = parseInt( $(this).text(), 10 );
                        if(!index) num--;
                        num -= carry;
                        carry =  0;
                        if(num < 0){
                            num = 59;
                            if (2==index) num = 23;
                            if (3==index) location.reload();
                            carry = 1;
                        }

                        var len = 3 == index? 1: 2;
                        var space = 3 == index? 1: 0;
                        $(this).text(zeroPadd(num, len, space));

                    });
                }, 1000);
            } 
        );
    </script></div></div>  <?php }
//print_r($this->row); ?>

5. Remember to install the hide product plugin after sale end date to prevent script error
Hope Jerome / Nicolas can share the link to download the plugin again

Last edit: 11 years 1 month ago by Jerome. Reason: [code] is nice

Please Log in or Create an account to join the conversation.

nicolas
Offline

11 years 1 month ago #211928 by nicolas

Replied by nicolas on topic Integration or New Count Down Feature

Hi,

Thank you for sharing this.

We're currently working on a countdown system for HikaDeal (another extension to HikaShop to have it work like groupon).
We'll be able to merge it back in HikaShop as an option to have a countdown like you needed.
In the mean time, your code is a great way to have a countdown on the product page.

Please Log in or Create an account to join the conversation.

lionel75
Offline

11 years 1 month ago #212252 by lionel75

Replied by lionel75 on topic Integration or New Count Down Feature

Hi
i ll test the code to learn the logic php code that use plug in ( great way to learn in joomla howto mix mix of php css html jquery) .
Does it mean that if the time is 0 , the product ( call it product1) ll not be renderer in client side and product2 ll appear ?
does it mean we need to create another product ( call it product2 with price2 ) that ll have the same properties than product1 except the price1 > price2 and enable by "range" date availability ?
how ll be manage stock ( quantities) of product1 when count down ll be set to 0 ?
At time=0 , does quantities2=quantities1 ?

regard's

Please Log in or Create an account to join the conversation.

ler@singmuiheng.com
Topic Author
Offline

11 years 1 month ago #212253 by ler@singmuiheng.com

Replied by ler@singmuiheng.com on topic Integration or New Count Down Feature

The above integration are controlled by build in Hikashop product preperties

When you enter a value into "Sale End Date/Available till" the count down will be triggered if the date is in future

Do remember to install the plugin to hide due product as the original hikashop will have display problem when the product available day is hit

Dear Nicolas

Can share the link to download the plugin to hide product when sale end date hit?

Please Log in or Create an account to join the conversation.

nicolas
Offline

11 years 1 month ago #212291 by nicolas

Replied by nicolas on topic Integration or New Count Down Feature

Sure, that's not a problem.

Please Log in or Create an account to join the conversation.

Rocco fx
Offline

11 years 3 weeks ago - 11 years 3 weeks ago #213377 by Rocco fx

Replied by Rocco fx on topic Integration or New Count Down Feature

ler@singmuiheng.com wrote:
2. Goto hikashop->display->view->product->listing_img_title (may vary depends on your template and view of listing, i am using image with title listing)

Hi,

im confused with step 2 and 3, were do you add that code? if i search the cpanel of hikashop i dont find any entry space for code, by following the exact steps it sends me to templates, so this code is going to be added directly to the "custom.css" or "less" file of the template we use? please some steps.

Its cool hikashop will have a groupon feature! when is it going to be released?

Thanks

Last edit: 11 years 3 weeks ago by Rocco fx.

Please Log in or Create an account to join the conversation.

ler@singmuiheng.com
Topic Author
Offline

11 years 3 weeks ago #213380 by ler@singmuiheng.com

Replied by ler@singmuiheng.com on topic Integration or New Count Down Feature

Hi Rocco

Do you manage to find the display menu? It should be reachable by going Components -> Hikashop
after this you should be able to locate the "Display" menu on Hikashop menu bar,
navigate this menu should be able to find "View",
filter out your "product " & "template" layout , then you should be able to find "listing_img_title" source code
!!!!***You went to template may caused by clicking on wrong anchor text, you should click on "listing_img_title" instead of others***!!!
(take note that i am using "listing with image & title" so i edit this source code, your one may be different)

Hope this helps

Please Log in or Create an account to join the conversation.

nicolas
Offline

11 years 3 weeks ago #213389 by nicolas

Replied by nicolas on topic Integration or New Count Down Feature

Hi,

Here is a screenshot for the area ler was talking about:
take.ms/5EGqq

Regarding a groupon feature, we're still working on it. We hope to release it before the end of the year. Before that, we'll have an auction feature released (almost ready).

Please Log in or Create an account to join the conversation.

Rocco fx
Offline

11 years 3 weeks ago - 11 years 3 weeks ago #213431 by Rocco fx

Replied by Rocco fx on topic Integration or New Count Down Feature

nicolas wrote: Here is a screenshot for the area ler was talking about:
take.ms/5EGqq

Hi,

thats exactly what i see, i finally got it and added the code, the counter appeared fine but my main page keept loading and refeshing like every 4 seconds so i had to change the date of the products for starting today and it works fine, maybe thats the crash u mention, but i fixed now.

thanks Nicolas,
very fast responses & nice help!

Last edit: 11 years 3 weeks ago by Rocco fx.

Please Log in or Create an account to join the conversation.

ler@singmuiheng.com
Topic Author
Offline

11 years 3 weeks ago #213433 by ler@singmuiheng.com

Replied by ler@singmuiheng.com on topic Integration or New Count Down Feature

The forever refreshing is caused by sale ended product not unpublished. U need to install the hikashop hide product plugin

Please Log in or Create an account to join the conversation.

Time to create page: 0.254 seconds